{% extends "personal_center/base.html" %}


{% block page_link %}
    <script src="../../static/personal_center/js/personal.js"></script>
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .td_class {
            text-align: center;
            border: #dfdfdf solid 1px;
            border-right: none;
            color: #0b0b0b;
        }
        #addForm {
            width: 500px;
            height: 300px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            display: none;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            z-index: 10100;
            font-size: 0;
        }

        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="height: 30%;width: 100%;display: inline-block;vertical-align: top;margin-top: 0.5%;margin-left: 0.5%;padding-left: 10px;">
        <div style="box-shadow: 0 1px 6px 3px #CFCFCF;width: 25%;height: 100%;display: inline-block;vertical-align: top;position: relative;">
            <div style="width: 100%;height: 35%;background: #0270c1;">

            </div>

            <div style="width: 100%;height: 120px;position: absolute;z-index: 999;top: 15%;text-align: center;">
                <img id="home_img" src="../../static/personal_center/img/default.jpeg" alt=""
                     style="width: 100px;height: 100px;border-radius: 50%;">
            </div>

            <div style="width: 100%;height: 65%;padding: 2%;padding-top: 5%;background: white;">
                <div style="width: 100%;height: 45%;overflow: auto;"></div>
                <div style="width: 100%;border: #cfcfcf solid 0.5px;"></div>
                <div style="width: 100%;height: 55%;overflow: hidden;overflow-x:auto;white-space: nowrap;">
                    <div style="width: 48%;height: 100%;display: inline-block;vertical-align: top;overflow: hidden;overflow-x:auto;white-space: nowrap;">
                        <div style="width: 100%;height: 48%;text-align: center;"><h6
                                style="line-height: 40px;">{{ last_loginTime }}</h6></div>
                        <div style="width: 100%;height: 48%;text-align: center;line-height: 48px;font-size: 12px;">登录时间</div>
                    </div>
                    <div style="height: 100%;border: #cfcfcf solid 0.5px;display: inline-block;vertical-align: top;"></div>
                    <div style="width: 47%;height: 100%;display: inline-block;vertical-align: top;margin-left: 2%;">
                        <div style="width: 100%;height: 48%;text-align: center;overflow: hidden;overflow-x:auto;white-space: nowrap;"><h6 style="line-height: 40px;">
                            IP:{{ myaddr }}</h6></div>
                        <div style="width: 100%;height: 48%;text-align: center;line-height: 48px;font-size: 12px;">{{ addr_str }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="box-shadow: 0 1px 6px 3px #CFCFCF;width: 33%;height: 100%;display: inline-block;vertical-align: top;background: white;">
            <div style="width: 100%;height: 40px;background: #0270c1;line-height: 40px;padding-left: 5px;color: #dfdfdf;"> 我的待办</div>
            <div style="width: 100%;height: 35%;padding-left: 5px;">

            </div>
            <div style="width: 100%;height: 40px;background: #0270c1;line-height: 40px;padding-left: 5px;color: #dfdfdf;"> 我的申请</div>
            <div style="width: 100%;height: 35%;padding-left: 5px;">

            </div>
        </div>

        <div style="box-shadow: 0 1px 6px 3px #CFCFCF;width: 40%;height: 100%;display: inline-block;vertical-align: top;margin: 0;padding: 0;">
            <div style="width: 100%;height: 100%;">
                <div style="display: inline-block;vertical-align: top;width: 100%;height: 100%;border-right: #dfdfdf solid 1px;">
                    <div style="width: 100%;height: 100%;background: white;">
                        <div style="width: 100%;height: 40px;border-bottom: #DCDCDC solid 1px;font-size: 0;background: #0270c1;color: #dfdfdf;">
                            <div style="width: 25%;height: 100%;display: inline-block;font-size: 14px;line-height: 40px;text-align: center;border-right: #DCDCDC solid 1px;">
                                日期
                            </div>
                            <div style="width: 25%;height: 100%;display: inline-block;font-size: 14px;line-height: 40px;text-align: center;border-right: #DCDCDC solid 1px;">
                                班次
                            </div>
                            <div style="width: 25%;height: 100%;display: inline-block;font-size: 14px;line-height: 40px;text-align: center;border-right: #DCDCDC solid 1px;">
                                一线班
                            </div>
                            <div style="width: 25%;height: 100%;display: inline-block;font-size: 14px;line-height: 40px;text-align: center;border-right: #DCDCDC solid 1px;">
                                二线班
                            </div>
                        </div>
                        <div style="width: 100%;height: 83%;table-layout:fixed;border-collapse: collapse;overflow: auto;font-size: 0;">
                            <div id="pb_one" style="width: 100%;height: 55px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_two" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_three" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_four" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_five" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_six" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                            <div id="pb_seven" style="width: 100%;height: 62.5px;border-bottom: #DCDCDC solid 1px;font-size: 0;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="vertical-align: top;display: inline-block;width: 100%;margin-left: 0.5%;margin-top: 0.5%;background: #dfdfdf;">
        <div style="box-shadow: 0 1px 6px 3px #CFCFCF;width: 100%;">
            <div style="height: 35px;line-height: 35px;width: 100%;border-bottom: #cfcfcf solid 0.5px;padding-left: 1%;color: #0c6fd9;background: white;">
                事务统计
            </div>

            <div style="width: 100%;border: #cfcfcf solid 0.5px;height: 400px;padding-top: 2%;padding-left: 2%;background: white;">
                <div style="width: 48%;height: 100%;display: inline-block;vertical-align: top;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">本年度公文月份统计图</h5></span>
                    <div id="myEntrust-left" style="width: 100%;height: 100%;"></div>
                </div>
                <div style="width: 48%;height: 100%;text-align: center;display: inline-block;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">本年度公文类型统计图</h5></span>
                    <div id="myEntrust"
                         style="display: inline-block;vertical-align: top;width: 100%;height: 95%;"></div>
                </div>
            </div>

            <div style="width: 100%;border: #cfcfcf solid 0.5px;height: 400px;padding-top: 2%;padding-left: 2%;margin-top: 2%;background: white;">
                <div style="width: 48%;height: 100%;display: inline-block;vertical-align: top;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">部门申请议题统计图</h5></span>
                    <div id="myMina-left" style="width: 100%;height: 100%;"></div>
                </div>
                <div style="width: 48%;height: 100%;text-align: center;display: inline-block;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">议题申请类型统计图</h5></span>
                    <div id="myMina" style="display: inline-block;vertical-align: top;width: 100%;height: 95%;"></div>
                </div>
            </div>

            <div style="width: 100%;border: #cfcfcf solid 0.5px;height: 400px;padding-top: 2%;padding-left: 2%;margin-top: 2%;background: white;">
                <div style="width: 48%;height: 100%;display: inline-block;vertical-align: top;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">部门申请会议室统计</h5></span>
                    <div id="main-left" style="width: 100%;height: 100%;"></div>
                </div>
                <div style="width: 48%;height: 100%;text-align: center;display: inline-block;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">会议室使用统计</h5></span>
                    <div id="main" style="display: inline-block;vertical-align: top;width: 100%;height: 95%;"></div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}


{% block script %}
    <script>
        var head_portrait_pic = "{{ head_portrait | safe }}";
        document.getElementById("home_img").src = head_portrait_pic;


        function close_models1() {
            document.getElementById("addForm").style.display = "none";
        }

        var chart = echarts.init(document.getElementById("main"));
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '会议室申请统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ meet_all_list | safe }}
                }
            ]
        };
        chart.setOption(option);

        var dep_all_dict = {{ dep_all_dict | safe }};
        var chart4 = echarts.init(document.getElementById("main-left"));
        var option4 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: dep_all_dict["abscissa"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: dep_all_dict["ordinate"],
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                }
            ]
        };
        chart4.setOption(option4);

        var dep_all_dict1 = {{ dep_all_dict1 | safe }};
        var chart3 = echarts.init(document.getElementById("myMina-left"));
        var option3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: dep_all_dict1["abscissa"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: dep_all_dict1["ordinate"],
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                }
            ]
        };
        chart3.setOption(option3);

        // 我的申请环形图
        var chart1 = echarts.init(document.getElementById("myMina"));
        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '议题类型统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ type_all_list | safe }}
                }
            ]
        };
        chart1.setOption(option1);

        // 我的申请环形图
        var chart2 = echarts.init(document.getElementById("myEntrust"));
        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                align: 'left',
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: '公文统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ all_list | safe }}
                }
            ]
        };
        chart2.setOption(option2);

        var doc_dict = {{ doc_dict | safe }};
        var chart5 = echarts.init(document.getElementById("myEntrust-left"));
        var option5 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: doc_dict["mouth_list"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: doc_dict["mouth_val"],
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                }
            ]
        };
        chart5.setOption(option5);

        var all_dict = {{ all_dict | safe }};
        {#var openDay = all_dict["openDay"];#}
        var one_line = all_dict["one_line"];
        var two_line = all_dict["two_line"];
        var today_day = all_dict["today"];
        var one_line_1 = document.getElementById("one_line_1");
        var one_line_2 = document.getElementById("one_line_2");
        var twoLine = document.getElementById("twoLine");
        var openDate = document.getElementById("openDate");

        var tag_id_list = ['pb_one', 'pb_two', 'pb_three', 'pb_four', 'pb_five', 'pb_six', 'pb_seven']
        var line_num = 0
        for (var pb in one_line){
            var tag_line = document.getElementById(tag_id_list[line_num]);
            if (one_line[pb][0]['duty_date'] === today_day){
                tag_line.style.color='#FF6347';
            }
            var div_week = document.createElement("div");div_week.style.width='25%';div_week.style.height='62.5px';div_week.style.display='inline-block';div_week.style.fontSize='14px';
            div_week.style.lineHeight='30px';div_week.style.textAlign='center';div_week.style.borderRight='#DCDCDC solid 1px';div_week.style.verticalAlign='top';
            div_week.innerHTML=one_line[pb][0]['week']+"<br>"+one_line[pb][0]['duty_date'];
            tag_line.appendChild(div_week);
            if (one_line[pb].length === 1){
                var div_week1 = document.createElement("div");div_week1.style.width='25%';div_week1.style.height='62.5px';div_week1.style.display='inline-block';div_week1.style.fontSize='14px';
                div_week1.style.lineHeight='62.5px';div_week1.style.textAlign='center';div_week1.style.borderRight='#DCDCDC solid 1px';div_week1.style.verticalAlign='top';
                div_week1.innerText="夜班";

                var div_week4 = document.createElement("div");div_week4.style.width='25%';div_week4.style.height='62.5px';div_week4.style.display='inline-block';div_week4.style.fontSize='14px';
                div_week4.style.lineHeight='62.5px';div_week4.style.textAlign='center';div_week4.style.borderRight='#DCDCDC solid 1px';div_week4.style.verticalAlign='top';
                div_week4.innerText=one_line[pb][0]['name']+"("+one_line[pb][0]['phone']+")";

                tag_line.appendChild(div_week1);tag_line.appendChild(div_week4);
            }
            if (one_line[pb].length === 2){
                var div_week2 = document.createElement("div");div_week2.style.width='25%';div_week2.style.height='62.5px';div_week2.style.display='inline-block';div_week2.style.fontSize='14px';
                div_week2.style.lineHeight='30px';div_week2.style.textAlign='center';div_week2.style.borderRight='#DCDCDC solid 1px';div_week2.style.verticalAlign='top';

                var div_week6 = document.createElement("div");div_week6.style.width='25%';div_week6.style.height='62.5px';div_week6.style.display='inline-block';div_week6.style.fontSize='14px';
                div_week6.style.lineHeight='30px';div_week6.style.textAlign='center';div_week6.style.borderRight='#DCDCDC solid 1px';div_week6.style.verticalAlign='top';
                for (var hh=0; hh<2; hh++){
                    var div_week3 = document.createElement("div");div_week3.style.width='100%';div_week3.style.height='31.25px';
                    if (hh === 0){
                        div_week3.style.borderBottom='#DCDCDC solid 1px';
                    }
                    div_week3.innerText = one_line[pb][hh]['type'];
                    div_week2.appendChild(div_week3)

                    var div_week7 = document.createElement("div");div_week7.style.width='100%';div_week7.style.height='31.25px';
                    if (hh === 0){
                        div_week7.style.borderBottom='#DCDCDC solid 1px';
                    }
                    div_week7.innerText = one_line[pb][hh]['name']+"("+one_line[pb][hh]['phone']+")";
                    div_week6.appendChild(div_week7)
                }
                tag_line.appendChild(div_week2);tag_line.appendChild(div_week6);
            }
            var div_week5 = document.createElement("div");div_week5.style.width='25%';div_week5.style.height='62.5px';div_week5.style.display='inline-block';div_week5.style.fontSize='14px';
            div_week5.style.lineHeight='62.5px';div_week5.style.textAlign='center';div_week5.style.borderRight='#DCDCDC solid 1px';div_week5.style.verticalAlign='top';
            div_week5.innerText=two_line[pb][0]['name'];
            tag_line.appendChild(div_week5);
            line_num += 1;
        }
    </script>
{% endblock %}
